<template>
  <div class="item-box">
    <div class="heard hw-box-style-flex hw-box-style-flex-r-center">
      <p class="heard-title1">logo设置</p>
    </div>
    <div class="item-content">
      <t-collapse expand-icon-placement="right" :defaultExpandAll="true">
        <t-collapse-panel :value="1">
          <template #header>
            <div class="hw-box-style-flex hw-box-style-flex-r-center">
              <span class="title2">展览LOGO</span>
            </div>
          </template>
          <template #default>
            <div
              v-if="parmas.logo"
              class="upload-item-img upload-item-img1 hw-click-cursor upload-item hw-flex-style-c-c"
            >
              <div class="icon-box">
                <t-icon name="browse" size="16px" style="cursor: pointer; color: #fff" @click="lookcoverUrl()" />
                <t-upload
                  ref="uploadRef3"
                  :before-upload="beforeUpload"
                  theme="custom"
                  accept="image/*"
                  :auto-upload="true"
                  :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                  @fail="handleFail"
                >
                  <div class="upload-icon-parent">
                    <div class="left-solid"></div>
                    <div class="right-solid"></div>
                    <t-icon name="upload" size="16px" style="cursor: pointer; color: #fff" />
                  </div>
                </t-upload>
                <t-icon name="delete" size="16px" style="cursor: pointer; color: #fff" @click="delimglOGO()" />
              </div>
              <img :src="urls + parmas.logo" alt="" />
            </div>
            <t-upload
              v-else
              ref="uploadRef3"
              :before-upload="beforeUpload"
              theme="custom"
              accept="image/*"
              :auto-upload="true"
              :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
              @fail="handleFail"
            >
              <div>
                <div
                  v-if="parmas.logo"
                  class="upload-item-img1 upload-item-img hw-click-cursor upload-item hw-flex-style-c-c"
                >
                  <img :src="urls + parmas.logo" alt="" />
                </div>
                <div v-else class="upload-item-img1 hw-click-cursor upload-item hw-flex-style-c-c">
                  <t-icon name="add" size="16" style="color: #fff"></t-icon>
                  <span class="upload-title1">点击上传图片</span>
                </div>
                <div class="upload-title2">LOGO将在首页左上角显示</div>
                <div class="upload-title2">建议尺寸：200*100</div>
              </div>
            </t-upload>
          </template>
        </t-collapse-panel>
        <t-collapse-panel :value="2" v-if="store.styleInfo.id != 420838403928133">
          <template #header>
            <div class="hw-box-style-flex hw-box-style-flex-r-center">
              <span class="title2">首页轮播图</span>
            </div>
          </template>
          <template #default>
            <div v-for="(item, index) in parmas.image" :key="index" class="swiper-item">
              <span class="swiper-item-title">{{ index < 9 ? '0' + (index + 1) : index + 1 }}</span>
              <div v-if="item.url" class="swiper-item-img swiper-item-ok">
                <div class="item-ok-delet">
                  <t-icon
                    @click="delImg(index)"
                    class="hw-click-cursor"
                    style="color: #fff; margin-right: 12px; margin-top: 12px"
                    name="delete"
                    size="18"
                  ></t-icon>
                </div>
                <img :src="urls + item.url" alt="" />
              </div>
              <div v-else class="hw-flex-style-c-c-c swiper-item-img">
                <t-loading size="small" text=""></t-loading>
                <span class="upload-loading-text">上传中{{ item.status }}%</span>
              </div>
            </div>
            <t-upload
              :loading="loading"
              ref="uploadRef2"
              :max="10"
              :before-upload="beforeUploadSwiper"
              theme="custom"
              accept="image/*"
              :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
              @fail="handleFail"
            >
              <div>
                <div class="hw-click-cursor upload-item-swiper hw-flex-style-c-c">
                  <t-icon name="add" size="16" style="color: #fff"></t-icon>
                  <span class="upload-title1">点击上传图片</span>
                </div>
                <div class="upload-title2">建议尺寸：1920*900</div>
              </div>
            </t-upload>
          </template>
        </t-collapse-panel>
      </t-collapse>
    </div>
    <t-image-viewer v-model:visible="IMGvisible" :images="[urls + parmas.logo]"> </t-image-viewer>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import COS from 'cos-js-sdk-v5';
import { getCloud } from '@/api/upLoad/index';
import { MessagePlugin } from 'tdesign-vue-next';
import { upLoadFn } from '@/utils/request/upload';
import { ref, reactive, nextTick } from 'vue';
import { heards, url, urls } from '@/utils/request/upload';
import { useProjectStore } from '@/store';
import { useRouter } from 'vue-router';

const store = useProjectStore();
const lookShow = ref(false);
const router = useRouter();
const uploadAllFilesInOneRequest = ref(false);
const loading = ref(false);
const parmas = reactive({
  image: [],
  logo: '',
});
const IMGvisible = ref(false);
parmas.logo = store.styleInfo.logo;

store.styleInfo.banners.forEach((el) => {
  if (el.url) {
    parmas.image.push(el);
  }
});

store.setBanner(parmas.image);
const looklOGO = () => {};
const setImagelist = () => {};
if (parmas.image.length == 0) {
  setImagelist();
}

// const onSuccess1 = (e: any) => {
//   parmas.logo = e.response.data;
//   store.setLogo(String(parmas.logo));
// };
const beforeUpload = (file: any) => {
  //回调钩子
  console.log(file);

  upLoadFn(file).then((res: any) => {
    // console.log(res);
    if (res) {
      parmas.logo = res;
      store.setLogo(parmas.logo);
      // formData.coverUrl = res;
    } else {
      MessagePlugin.error('创建成功');
    }
  });
};
const beforeUploadSwiper = (file: any) => {
  //回调钩子
  if (file.size / 1048576 > 2) {
    MessagePlugin.error('上传大小超出2M限制');
    return;
  }
  swiperLoad(file);
  // upLoadFn(file).then((res: any) => {
  //   // console.log(res);
  //   if (res) {
  //     let obj = {
  //       url: res,
  //       type: 1,
  //       link: '',
  //       name: file.name,
  //       status: 0,
  //     };
  //     parmas.image.push(obj);
  //     store.setBanner(parmas.image);
  //   } else {
  //     MessagePlugin.error('创建成功');
  //   }
  // });
};
const swiperLoad = (file: any) => {
  let name = file.name.split('.');
  let fomart = name[1];
  getCloud(fomart, 'image').then((res: any) => {
    // console.log(res.data);
    let obj = {
      url: '',
      type: 1,
      link: '',
      name: res.data.fileName,
      status: 0,
    };
    parmas.image.push(obj);
    const cos = new COS({
      getAuthorization: function (options, callback) {
        callback({
          TmpSecretId: res.data.tmpSecretId,
          TmpSecretKey: res.data.tmpSecretKey,
          XCosSecurityToken: res.data.token,
          StartTime: res.data.startTime,
          ExpiredTime: res.data.expiredTime,
        });
      },
    });
    cos.putObject(
      {
        Bucket: res.data.bucket /* 存储桶 */,
        Region: res.data.region /* 存储桶所在地域，必须字段 */,
        Key: res.data.fileName /* 文件名 */,
        StorageClass: 'STANDARD', // 上传模式, 标准模式
        Body: file.raw, // 上传文件对象
      },
      (err, data) => {
        // console.log(err || data);
        if (data.statusCode === 200) {
          let indexs = parmas.image.findIndex((el) => {
            return el.name == res.data.fileName;
          });
          parmas.image[indexs].url = res.data.fileName;
          nextTick(() => {
            store.setBanner(parmas.image);
          });
        }
      },
    );
  });
};
const handleFail = (e: any) => {};
// const onSuccessSwiper = (e: any) => {
//   parmas.image.forEach((el) => {
//     // console.log(el.name, e.file.name);
//     if (el.name == e.file.name) {
//       el.url = String(e.response.data);
//     }
//   });

// };
const lookcoverUrl = (e: number) => {
  IMGvisible.value = true;
};
const delimglOGO = () => {
  parmas.logo = '';
  store.setLogo(parmas.logo);
};

const delImg = (e: number) => {
  nextTick(() => {
    parmas.image.splice(e, 1);
    store.setBanner(parmas.image);
  });
};
const Progress = (options: any) => {
  parmas.image.forEach((el) => {
    el.status = options.percent;
  });
};
const pathBlank = () => {
  // /prijectMenu/plan
  router.push({ path: '/prijectMenu/plan', query: { projectId: localStorage.getItem('projectId') } });
};
</script>

<style lang="less" scoped>
@import './index.less';

.upload-item {
  flex-direction: column;
  width: 268px;
  height: 168px;
  background: #343231;
  border-radius: 3px;

  border: 1px solid #2d2928;
  img {
    width: 100%;
    height: 100px;
    object-fit: contain;
  }
}
.upload-item-img1 {
  width: 200px;
  height: 100px;
  margin-bottom: 4px;
  object-fit: contain;
}
.upload-item-img1:hover {
  border: 1px dashed #59534f;
}
.upload-item-swiper {
  flex-direction: column;
  width: 268px;
  height: 168px;
  background: #343231;
  border-radius: 3px;
  margin-top: 16px;
  border: 1px solid #2d2928;
}
.upload-title1 {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
  line-height: 20px;
  margin-top: 8px;
}
.upload-title2 {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.38);
  line-height: 22px;
  margin-top: 4px;
}
.upload-loading-text {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 20px;
}
.swiper-item {
  width: 100%;
  // padding-right: 16px;
  margin-bottom: 16px;
}
.swiper-item-title {
  font-size: 14px;
  font-family: Roboto-Regular, Roboto;
  font-weight: 400;
  color: #fff;
  line-height: 22px;
}
.swiper-item-img {
  position: relative;
  width: 268px;
  height: 168px;
  background: #eeeeee;
  border-radius: 3px;
  // border: 1px solid #dcdcdc;
  img {
    width: 268px;
    height: 168px;
    border-radius: 3px;
  }
}
.swiper-item-img:hover {
  .item-ok-delet {
    opacity: 1;
  }
}
.item-ok-delet {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  right: 0px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.4);
}
.title2 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: 24px;
}
:deep(.t-collapse-panel__content) {
  padding-bottom: 16px;
}
:deep(.t-collapse-panel__content) {
  padding: 20px 16px !important;
}
:deep(.t-collapse-panel) {
  box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
}
.upload-item-img {
  position: relative;
  width: 140px;
  height: 100px;
  img {
    position: relative;
    z-index: 50;
    object-fit: contain;
  }
}

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 66;
  background: rgba(0, 0, 0, 0.4);
}
.img-boxs-solid {
  width: 1px;
  height: 20px;
  background: #fff;
  margin: 0 12px;
}
.upload-item-img:hover {
  .icon-box {
    opacity: 1;
  }
}
.item-content {
  box-shadow: none;
}
:deep(.t-collapse-panel__content) {
  box-shadow: inset 0px -1px 0px 0px #343231;
}
.upload-item-img1 {
  width: 200px !important;
  height: 100px !important;
  img {
    width: 200px !important;
    height: 100px !important;
    object-fit: contain;
  }
}
.upload-icon-parent {
  position: relative;
  padding: 0 18px;
  margin: 0 18px;
  .left-solid {
    position: absolute;
    left: 0;
    top: calc(50% - 6px);
    width: 1px;
    height: 12px;
    background: #fff;
  }
  .right-solid {
    position: absolute;
    right: 0;
    top: calc(50% - 6px);
    width: 1px;
    height: 12px;
    background: #fff;
  }
}
</style>
